<template>
  <div class="add-gift-area">
    <div class="top"><div>{{banquet.name}}</div></div>
    <div class="left">
      <div v-for="giftMoney in giftMoneyList" :key="giftMoney.id" class="gift-money-card">
        <div>序号：{{giftMoney.id}}</div>
        <div>{{giftMoney.guestName}}</div>
        <div>{{giftMoney.giftMoney}}</div>
      </div>
    </div>
    <div style="margin:0 auto;width: 600px">
      <el-form label-position="right" label-width="80px" :model="addForm" :rules="rules" ref="addForm">
        <el-form-item label="宾客姓名" prop="guestName">
          <el-input
              v-model="addForm.guestName" autofocus
              ref="guestName"
              @keydown.down.native="focusNext('giftMoney')"
          ></el-input>
        </el-form-item>
        <el-form-item label="礼金" prop="giftMoney">
          <el-input type="number"
              v-model="addForm.giftMoney" ref="giftMoney"
              @keydown.down.native="focusNext('remark')"
              @keyup.enter.native="submitForm('addForm')"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否代礼" >
          <el-radio
              v-for="item in proxyEnums"
              v-model="addForm.isProxy"
              :key="item.code"
              :label="item.code">{{item.msg}}
          </el-radio>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
              v-model="addForm.remark"
              ref="remark"
              @keydown.down.native="focusNext('guestName')"
              @keyup.enter.native="submitForm('addForm')"
          ></el-input>
        </el-form-item>
        <el-form-item class="add-area">
          <el-button type="primary" size="small" @click="submitForm('addForm')">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import ResultUtil from "@/utils/ResultUtil";
import { Message } from 'element-ui';
import YesOrNoEnum from "@/enum/YesOrNoEnum";
import EnumUtil from "@/utils/EnumUtil";
import PageUtil from "@/utils/PageUtil";
export default {
  name:'BanquetGiftMoneyAdd',
  data(){
    return {
      page:PageUtil.defaultPage(),
      giftMoneyList:null,
      proxyEnums: EnumUtil.getOptions(YesOrNoEnum),
      banquet:{},
      addForm: {
        banquetId: this.$route.query.banquetId,
        guestName:null,
        giftMoney:null,
        isProxy:YesOrNoEnum.NO.code,
        remark:null,
      },
      rules: {
        guestName: [
          {required: true, message: '请输入宾客姓名', trigger: 'blur'},
          {min: 2, max: 32, message: '长度在 2 到 32 个字符', trigger: 'blur'}
        ],
        giftMoney: [
          {required: true,message: '请输入礼金', trigger: 'blur'}
        ],
        isProxy: [
          {required: true}
        ]
      }
    }
  },
  methods:{
    async getGiftMoneyPageList(){
      if(!this.addForm.banquetId){
        Message({
          message: "banquetId不能为空",
          type: 'error',
          duration:5000,
          showClose:true,
          center:true
        });
        return;
      }
      let result = await this.$API.reqGiftMoneyPageList(Object.assign(PageUtil.toRequestPage(this.page),{banquetId:this.addForm.banquetId}));
      if(ResultUtil.isSuccess(result)){
        this.giftMoneyList = result.data.list;
        this.page = PageUtil.extractPage(result.data);
      }
    },
    async getBanquetById(){
      if(!this.addForm.banquetId){
        Message({
          message: "banquetId不能为空",
          type: 'error',
          duration:5000,
          showClose:true,
          center:true
        });
        return;
      }
      let result = await this.$API.reqBanquetById(this.addForm.banquetId);
      if(ResultUtil.isSuccess(result)){
        this.banquet = result.data;
      }
    },
    focusNext(nextRef) {
      this.$refs[nextRef].focus()
    },
    submitForm(formName) {
      if(!this.addForm.banquetId){
        Message({
          message: "banquetId不能为空",
          type: 'error',
          duration:5000,
          showClose:true,
          center:true
        });
        return;
      }
      this.$refs[formName].validate( async (valid) => {
        if (valid) {
          let result = await this.$API.reqGiftMoneyAdd(this.addForm);
          if(ResultUtil.isSuccess(result)){
            Message({
              message: "添加成功",
              type: 'success',
              duration:2000,
              showClose:true,
              center:true
            });
            this.$refs[formName].resetFields();
            this.focusNext('guestName');
            await this.getGiftMoneyPageList();
            //this.$router.go(-1);
          }
        } else {
          return false;
        }
      });
    },
  },
  mounted() {
    this.getBanquetById();
    this.getGiftMoneyPageList();
  }
}
</script>

<style scoped>
.add-gift-area{
  height: 100%;
  width: 100%;
  position: relative;
}
.top{
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
}

.left{
  position: absolute;
  left: 20px;
  top: 20px;
  width: 360px;
}

.gift-money-card{
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: 0.5s ease;
  border-radius: 10px;
}

.gift-money-card:hover{
  box-shadow: 0 0 10px #409EFF;
  transform: scale(1.05);
}

.gift-money-card div {
  margin: 20px 0px;
  width: 120px;
  display: flex;
  justify-content: center;
}

.gift-money-card:nth-child(1){
  box-shadow: 0 0 10px #409EFF;
  transform: scale(1.05);
}

.add-area{
  display: flex;
  justify-content: center;
}
</style>

